<template>
  <div class="navbar-container">
    <!-- 返回主页按钮 -->
    <div class="home-button" @click="goToHome">
      <span class="home-icon">🏡</span>
      <span >返回主页</span>
    </div>
    
    <!-- 原有的标签页导航 -->
    <el-tabs 
      v-model="activeTab" 
      class="sidebar" 
      @tab-click="handleTabClick"
    >
      <el-tab-pane 
        v-for="item in menuItems" 
        :key="item.id" 
        :name="item.id"
      >
        <template #label>
          <span class="tab-label">
            <span class="icon">{{ item.icon }}</span>
            <span class="text">{{ item.text }}</span>
          </span>
        </template>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()

const menuItems = ref([
  { id: 'overview', icon: '🏠', text: '个人总览' },
  { id: 'favorites', icon: '⭐', text: '我的收藏' },
  { id: 'progress', icon: '📈', text: '学习进度' },
  { id: 'test', icon: '📝', text: '测试记录' },
  { id: 'message', icon: '📬', text: '消息通知' },
  { id: 'feedback', icon: '💬', text: '反馈与讨论' },
  { id: 'setting', icon: '⚙️', text: '个人信息' }
])

const activeTab = computed({
  get: () => {
    const arr = route.path.split('/')
    return arr.length > 3 ? arr[3] : 'overview'
  },
  set: (val) => {
    // setter 可以为空，因为我们通过 handleTabClick 处理路由
  }
})

const handleTabClick = (tab) => {
  const id = tab.paneName
  if (id === 'overview') {
    router.push('/home/user-center')
  } else {
    router.push(`/home/user-center/${id}`)
  }
}

const goToHome = () => {
  router.push('/home')
}
</script>

<style scoped>
/* 导航栏容器 */
.navbar-container {
  width: 100%;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(107, 155, 210, 0.1);
  position: fixed;
  left: 0;
  top: 0px;
  transition: all 0.3s ease;
  z-index: 99;
  display: flex;
  align-items: center;
  height: auto;
}

/* 返回主页按钮样式 */
.home-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  color: #518adf;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;

  box-sizing: border-box;
  flex-shrink: 0;
  margin-right: 10px;
}

.home-button:hover {
  background: rgba(107, 155, 210, 0.05);
  color: #5a8bc1;
}

.home-icon {
  font-size: 18px;
  flex-shrink: 0;
}

.home-text {
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: max-width 0.3s ease-out, opacity 0.3s ease-out, margin-left 0.3s ease-out;
  margin-left: 0;
}

.home-button:hover .home-text {
  max-width: 150px;
  opacity: 1;
  margin-left: 12px;
}

/* 原有的标签页样式 */
.sidebar {
  flex: 1;
  background: transparent;
  border-bottom: none;
  padding: 0;
  display: flex;
  justify-content: center;
  height: auto;
}

/* 隐藏默认的 El Tabs 头部底线 */
:deep(.el-tabs__header) {
  margin: 0;
  border-bottom: none;
}

/* 调整标签导航以实现水平显示和居中 */
:deep(.el-tabs__nav) {
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  overflow-x: auto;
  width: 100%;
}

/* 移除默认标签项样式 */
:deep(.el-tabs__item) {
  padding: 12px 20px;
  height: auto;
  line-height: normal;
  color: #4a6fa5;
  font-size: 15px;
  font-weight: 500;
  transition: all 0.3s ease;
  border-bottom: 4px solid transparent;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 标签项的悬停和活跃状态 */
:deep(.el-tabs__item:hover) {
  background: rgba(107, 155, 210, 0.05);
  color: #5a8bc1;
}

:deep(.el-tabs__item.is-active) {
  background: rgba(107, 155, 210, 0.1);
  color: #409eff;
  border-bottom-color: #409eff;
  font-weight: 500;
}

/* 移除活跃标签指示线 */
:deep(.el-tabs__active-bar) {
  display: none;
}

/* 自定义标签内容的样式，用于图标和文本 */
.tab-label {
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon {
  font-size: 18px;
  flex-shrink: 0;
}

.text {
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: max-width 0.3s ease-out, opacity 0.3s ease-out, margin-left 0.3s ease-out;
  margin-left: 0;
}

/* 悬停和活跃状态下标签文本的样式 */
:deep(.el-tabs__item:hover .text),
:deep(.el-tabs__item.is-active .text) {
  max-width: 150px;
  opacity: 1;
  margin-left: 12px;
  flex-shrink: 1;
}

/* 调整 El Tabs 的整体内边距，移除多余空间 */
:deep(.el-tabs__nav-wrap) {
  padding: 0 10px;
}

/* 响应式布局 */
@media (max-width: 768px) {
  .navbar-container {
    padding: 10px 0;
    overflow-x: auto;
    white-space: nowrap;
  }

  .home-button {
    padding: 8px 15px;
    margin-right: 5px;
  }

  .sidebar :deep(.el-tabs__nav) {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }

  .sidebar :deep(.el-tabs__nav-scroll) {
    overflow-x: auto;
  }

  :deep(.el-tabs__item) {
    padding: 8px 15px;
  }
}
</style>